<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/wwl/icon/iconfont.css" />
    <link rel="stylesheet" href="../css/wwl/demo.css" />
    <link rel="stylesheet" href="../css/yl/用户.css">
    <title>权限设置-用户管理</title>
</head>

<body>
    <nav class="nav-ct">
        <div class="nav-hd">
            <span class="iconfont icon-oabangong"></span>
            <span class="title">办公后台系统</span>
        </div>
        <div class="center">
            <ul class="nav-content">
                <li><a href="./index.html">工作台</a></li>
                <li><a href="">数据大屏</a></li>
                <li><a href="">员工</a></li>
                <li><a href="">组织</a></li>
                <li><a href="">招聘</a></li>
                <li><a href="">考勤</a></li>
                <li><a href="">薪酬</a></li>
                <li><a href="">社保公积金</a></li>
                <li><a href="">绩效</a></li>
                <li><a href="">培训</a></li>
                <li><a href="./审核.html">审批</a></li>
                <li><a href="./权限-用户.html">权限设置</a></li>
            </ul>
        </div>
    </nav>
    <div class="ct-box">
        <div class="nav-ct-2">
            <ul class="nav-ct-menu">
                <li class="title">权限管理
                    <ul>
                        <li class="yonghu"><a  href="./权限-用户.html">用户管理</a></li>
                        <li><a href="./角色.html">角色管理</a></li>
                    </ul>
                </li>
                <!-- <li class="title">职位体系
                    <ul>
                        <li><a href="">职位管理</a></li>
                        <li><a href="">职位管理</a></li>
                        <li><a href="">职级管理</a></li>
                    </ul>
                </li> -->
            </ul>
        </div>
        <div class="box">
            <div class="title-b">
                <div class="top">
                    <p>用户管理</p>
                </div>
                <div class="mid">
                    <span>用户名称：</span><input class="input-a" />
                    <span class="mid-span">部门名称：</span><select id="" class="input-b" >
                        <!-- <option value=""></option> -->
                        <option value="财务部">财务部</option>
                        <option value="技术部">技术部</option>
                        <option value="商务部">商务部</option>
                        <option value="人力资源部">人力资源部</option>
                    </select>
                    <button id="searchBtn">搜索</button>
                </div>
            </div>

            <div class="table-box">
                <table class="table">
                    <div class="table-a">
                        <button id="allDeleteBtn">多项删除</button>
                        <button id="addBtn">+添加用户</button>
                    </div>
                    <thead class="theadBox">
                        <tr>
                            <th>姓名</th>
                            <th>员工编号</th>
                            <th>部门</th>
                            <th>手机号码</th>
                            <th>角色</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <div class="page-turn-bar">
                    <div id="next">&gt;</div>
                    <div id="pages"></div>
                    <div id="pre">&lt;</div>
                </div>
            </div>
        </div>
        <div id="view">
            <div id="viewBox">
                <div id="view-a">
                    <form>
                        <div class="row"><label class="col-sm-4">姓名：</label><input disabled id="name" class="col-sm-7"
                                type="text" />
                        </div>
                        <div class="row"><label class="col-sm-4">员工编号：</label><input disabled id="employeeNumber"
                                class="col-sm-7" type="text" />
                        </div>
                        <div class="row"><label class="col-sm-4">部门：</label><select id="department" class="col-sm-7">
                                <option value="财务部">财务部</option>
                                <option value="技术部">技术部</option>
                                <option value="商务部">商务部</option>
                                <option value="人力资源部">人力资源部</option>
                            </select>
                        </div>
                        <div class="row"><label class="col-sm-4">手机号码：</label><input id="tel" class="col-sm-7"
                                type="text" />
                        </div>
                        <div class="row"><label class="col-sm-4">角色：</label><select id="role" class="col-sm-7">
                                <option value="系统管理员">系统管理员</option>
                                <option value="平台管理员">平台管理员</option>
                                <option value="财务管理员">财务管理员</option>
                            </select>
                        </div>
                    </form>
                    <div class="row rowa">
                        <span class="col-sm-1"></span>
                        <button class="col-sm-4" id="confirmBtn">确定修改</button>
                        <span class="col-sm-1"></span>
                        <button class="col-sm-4" id="cancelBtn">取消</button>
                    </div>

                </div>
            </div>

        </div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            您确认删除以下信息吗？
                        </h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="row"><label class="col-sm-4">姓名：</label><input disabled id="namea"
                                    class="col-sm-7" type="text" />
                            </div>
                            <div class="row"><label class="col-sm-4">员工编号：</label><input disabled id="employeeNumbera"
                                    class="col-sm-7" type="text" />
                            </div>
                            <div class="row"><label class="col-sm-4">部门：</label><input disabled id="departmenta"
                                    class="col-sm-7" type="text" />
                            </div>
                            <div class="row"><label class="col-sm-4">手机号码：</label><input disabled id="tela"
                                    class="col-sm-7" type="text" />
                            </div>
                            <div class="row"><label class="col-sm-4">角色：</label><input disabled id="rolea"
                                    class="col-sm-7" type="text" />


                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" id="sure" class="btn btn-primary">
                            确认删除
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
        <div id="delete">
            <div id="deleteBox">
                <div id="delete-a">

                    <div class="row">
                        <h4>确定删除已勾选的选项？</h4>
                        <!-- <span class="col-sm-1"></span> -->
                        <button type="button" class="btn btn-success col-sm-4" id="sureBtn">我确定</button>
                        <span class="col-sm-4"></span>
                        <button type="button" class="btn btn-danger col-sm-4" id="cancelBtna">再想想</button>
                    </div>

                </div>
            </div>

        </div>
        <div id="add">
            <div id="addBox">
                <div id="add-a">
                    <div style=" border-bottom: 1px solid #999999;margin-bottom: 60px;">
                        <p>添加用户</p>
                    </div>
                    <form>
                        <div class="row"><label class="col-sm-4"><span class="a">*</span>姓名：</label><input id="addName"
                                class="col-sm-7" type="text" />
                        </div>
                        <div class="row"><label class="col-sm-4"><span class="a">*</span>员工编号：</label><input
                                id="addEmployeeNumber" class="col-sm-7" type="text" />
                        </div>
                        <div class="row"><label class="col-sm-4"><span class="a">*</span>手机号码：</label><input id="addTel"
                                class="col-sm-7" type="text" />
                        </div>
                        <div class="row"><label class="col-sm-4"><span class="a">*</span>所属部门：</label><select
                                id="addDepartment" class="col-sm-7">
                                <option value="财务部">财务部</option>
                                <option value="技术部">技术部</option>
                                <option value="商务部">商务部</option>
                                <option value="人力资源部">人力资源部</option>
                            </select>
                        </div>

                        <div class="row"><label class="col-sm-4"><span class="a">*</span>分配角色：</label><select
                                id="addRole" class="col-sm-7">
                                <option value="系统管理员">系统管理员</option>
                                <option value="平台管理员">平台管理员</option>
                                <option value="财务管理员">财务管理员</option>
                            </select>
                        </div>
                    </form>
                    <div class="row rowa">
                        <span class="col-sm-1"></span>
                        <button id="addConfirmBtn" type="button" class="btn btn-primary col-sm-4">确认添加</button>
                        <span class="col-sm-2"></span>
                        <button id="addCancelBtn" type="button" class="btn btn-default col-sm-4">取消</button>

                    </div>

                </div>
            </div>

        </div>
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>
            let data = [{
                name: "张一",
                employeeNumber: "1",
                department: "技术部",
                tel: "13451206485",
                role: "平台管理员",
                isComplete: false
            },
            {
                name: "张一",
                employeeNumber: "2",
                department: "商务部",
                tel: "13451256482",
                role: "系统管理员",
                isComplete: false
            },
            {
                name: "张三",
                employeeNumber: "3",
                department: "人力资源部",
                tel: "13451256152",
                role: "系统管理员",
                isComplete: false
            },
            {
                name: "张四",
                employeeNumber: "4",
                department: "技术部",
                tel: "13455145616",
                role: "平台管理员",
                isComplete: false
            },
            {
                name: "李一",
                employeeNumber: "5",
                department: "技术部",
                tel: "18425156156",
                role: "平台管理员",
                isComplete: false
            },
            {
                name: "李二",
                employeeNumber: "6",
                department: "财务部",
                tel: "18425156115",
                role: "财务管理员",
                isComplete: false
            },
            {
                name: "李三",
                employeeNumber: "7",
                department: "人力资源部",
                tel: "18425151616",
                role: "系统管理员",
                isComplete: false
            },
            {
                name: "李四",
                employeeNumber: "8",
                department: "财务部",
                tel: "13545864484",
                role: "财务管理员",
                isComplete: false
            },
            {
                name: "王一",
                employeeNumber: "9",
                department: "商务部",
                tel: "17545646544",
                role: "系统管理员",
                isComplete: false
            },
            {
                name: "王二",
                employeeNumber: "10",
                department: "财务部",
                tel: "15464864654",
                role: "财务管理员",
                isComplete: false
            },
            {
                name: "王三",
                employeeNumber: "11",
                department: "商务部",
                tel: "15164568464",
                role: "财务管理员",
                isComplete: false
            },
            {
                name: "王四",
                employeeNumber: "12",
                department: "人力资源部",
                tel: "18355645644",
                role: "财务管理员",
                isComplete: false
            },
            {
                name: "ad",
                employeeNumber: "13",
                department: "财务部",
                tel: "19545645645",
                role: "平台管理员",
                isComplete: false
            },
            {
                name: "萨达",
                employeeNumber: "14",
                department: "财务部",
                tel: "16546846844",
                role: "系统管理员",
                isComplete: false
            },
            {
                name: "刚发的",
                employeeNumber: "15",
                department: "技术部",
                tel: "18514564564",
                role: "财务管理员",
                isComplete: false
            },
            {
                name: "挂电话",
                employeeNumber: "16",
                department: "财务部",
                tel: "18514562311",
                role: "系统管理员",
                isComplete: false
            },
            {
                name: "王额",
                employeeNumber: "17",
                department: "财务部",
                tel: "18515648115",
                role: "财务管理员",
                isComplete: false
            },
            {
                name: "尽可能",
                employeeNumber: "18",
                department: "技术部",
                tel: "18515645643",
                role: "财务管理员",
                isComplete: false
            },
            {
                name: "对话框",
                employeeNumber: "19",
                department: "人力资源部",
                tel: "18515645641",
                role: "财务管理员",
                isComplete: false
            },
            {
                name: "的时候",
                employeeNumber: "20",
                department: "商务部",
                tel: "14514568456",
                role: "财务管理员",
                isComplete: false
            },
            {
                name: "较好的",
                employeeNumber: "21",
                department: "技术部",
                tel: "18514564156",
                role: "财务管理员",
                isComplete: false
            },
            {
                name: "阿辉",
                employeeNumber: "22",
                department: "财务部",
                tel: "16156468462",
                role: "财务管理员",
                isComplete: false
            },
            ]

            let pageSize = 5;
            function renderTable(data, currentPage = 1) {
                // 动态渲染
                renderPaging(data, currentPage);
                const startIndex = pageSize * (currentPage - 1);
                const endIndex = startIndex + pageSize;
                const dataByPaging = data.slice(startIndex, endIndex);
                $(".box tbody").empty();
                for (let i = 0; i < dataByPaging.length; ++i) {
                    let item = dataByPaging[i];
                    const checked = item.isComplete ? "checked" : "";
                    $("tbody").append(
                        `<tr><td><input id="checkboxa" ${checked} data-id="${item.employeeNumber}"  type="checkbox"/>${item.name}</td><td>${item.employeeNumber}</td><td>${item.department}</td><td>${item.tel}</td><td>${item.role}</td><td><a class=viewBtn data-id=${item.employeeNumber}>编辑</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class=deleteBtn class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-id=${item.employeeNumber}>删除</a></td>
                           
                            </tr >`
                    );
                    // <td><button type="button" class="btn btn-link">编辑</button><button type="button" class="btn btn-link">删除</button></td>
                }
            }
            renderTable(data)
            function renderPaging(data, currentPage = 1) {
                $("#pages").empty();
                let num = Math.ceil(data.length / pageSize);
                for (let i = 1; i <= num; ++i) {
                    $("#pages").append(`<div>${i}</div>`);
                }
                $("#pages div")
                    .eq(currentPage - 1)
                    .addClass("color");
            }
            $("#pages").on("click", "div", function (event) {
                const currentPage = parseInt($(event.target).text());
                console.log(currentPage);
                renderTable(data, currentPage);
            });
            $("#next").on("click", function (event) {
                let currentPage = parseInt($("#pages>.color").text());
                let max = Math.ceil(data.length / pageSize);
                if (currentPage === max) {
                    return;
                }
                renderTable(data, currentPage + 1);
            });
            $("#pre").on("click", function (event) {
                //获取当前下标
                let currentPage = parseInt($("#pages>.color").text());
                if (currentPage === 1) {
                    return;
                }
                renderTable(data, currentPage - 1);
                // console.log(a)
            });
            let arra = [];
            $("#searchBtn").on("click", function () {
                arra = [];
                let value1 = $(".input-a").prop("value").trim();
                let value2 = $(".input-b").prop("value").trim();
                // console.log(value)
                if (!value1 ||!value2) {
                    renderTable(data);
                    return;
                }
                for (let i = 0; i < data.length; ++i) {
                    let a = data[i].name;
                    let b=data[i].department
                    // console.log(a)
                    if (a.includes(value1)&&b.includes(value2)) {
                        arra.push(data[i]);
                    }
                }
                renderTable(arra);
            });
            $(".box tbody").on("click", ".viewBtn", function () {
                const dataId = $(event.target).attr("data-id");
                // console.log(dataId, typeof dataId)
                $("#view").show()
                for (let i = 0; i < data.length; ++i) {
                    if (data[i].employeeNumber === dataId) {
                        $("#employeeNumber").val(data[i].employeeNumber)
                        // console.log(data[i].employeeNumber, typeof data[i].employeeNumber)
                        $("#name").val(data[i].name)
                        $("#department").val(data[i].department)
                        // console.log(data[i].ticketType)
                        $("#tel").val(data[i].tel)
                        $("#role").val(data[i].role)
                    }
                }
            })
            $("#cancelBtn").on("click", function () {
                $("#view").hide();
            });

            // 确认修改
            $("#confirmBtn").on("click", (event) => {
                // 获取input的值

                const name = $("#name").val()
                // console.log(ticketSerialNumber)
                const employeeNumber = $("#employeeNumber").val();
                const department = $("#department").val();
                // console.log(ticketType)
                const tel = $("#tel").val();
                const role = $("#role").val();
                // 修改 student
                for (let i = 0; i < data.length; ++i) {
                    const item = data[i];
                    if (item.employeeNumber === employeeNumber) {
                        item.employeeNumber = employeeNumber;
                        item.department = department;
                        item.tel = tel;
                        item.name = name;
                        item.role = role;
                    }
                }
                // 重新渲染
                renderTable(data);
                // 隐藏弹窗
                $("#view").hide();

            });
            $(".box tbody").on("click", ".deleteBtn", function (event) {
                const dataId = $(event.target).attr("data-id");
                for (let i = 0; i < data.length; ++i) {
                    if (data[i].employeeNumber === dataId) {
                        $("#employeeNumbera").val(data[i].employeeNumber)
                        // console.log(data[i].employeeNumber, typeof data[i].employeeNumber)
                        $("#namea").val(data[i].name)
                        $("#departmenta").val(data[i].department)
                        // console.log(data[i].ticketType)
                        $("#tela").val(data[i].tel)
                        $("#rolea").val(data[i].role)
                    }
                }
            })
            $("#sure").on("click", function () {
                for (let i = 0; i < data.length; ++i) {
                    const item = data[i];
                    const employeeNumber = $("#employeeNumbera").val();
                    if (item.employeeNumber === employeeNumber) {
                        data.splice(i, 1)
                    }
                }
                $('#myModal').modal('hide')
                renderTable(data)
            })
            $("#allDeleteBtn").on("click", function () {

            })
            $(".box tbody").on("change", "input", function (event) {
                // 当前选中checkbox
                const dataId = $(event.target).attr("data-id");
                // 当前是否被选中
                const checked = $(event.target).prop("checked");
                // 修改数据
                // 修改该 id 对应data的数据
                for (let i = 0; i < data.length; ++i) {
                    const item = data[i];
                    if (item.employeeNumber === dataId) {
                        item.isComplete = checked;
                    }
                }
                // 重新渲染
                renderTable(data);
            });
            $("#allDeleteBtn").on("click", function (event) {
                $("#delete").show()
                // 删除 isComplete 为 true 的数据            

            });
            $("#sureBtn").on("click", function () {
                for (let i = 0; i < data.length; ++i) {
                    const item = data[i];
                    if (item.isComplete === true) {
                        // 数组删除
                        data.splice(i, 1);
                        i--;
                    }
                }
                $("#delete").hide()
                // 基于新的数据重新渲染
                renderTable(data);
            })
            $("#cancelBtna").on("click", function () {
                $("#delete").hide()
            })
            $("#addBtn").on("click", function () {
                $("#add").show()
            })
            $("#addConfirmBtn").on("click", function () {
                let addName = $("#addName").val()
                let addEmployeeNumber = $("#addEmployeeNumber").val()
                let addTel = $("#addTel").val()
                let addDepartment = $("#addDepartment").val()
                let addRole = $("#addRole").val()
                data.push({
                    name: addName,
                    employeeNumber: addEmployeeNumber,
                    tel: addTel,
                    department: addDepartment,
                    role: addRole,
                    isComplete: false
                })

                renderTable(data)
                $("#add").hide()
            })
            $("#addCancelBtn").on("click", function () {
                $("#add").hide()
            })

        </script>
</body>

</html>